<template>
  <div :id="id" class="qrcode"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'qrcode',
  props: {
    url: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    width:{
        default:46
    }
  },
  data() {
    return {}
  },
  methods: {
    qrcode() {
      this.$nextTick(() => {
        document.getElementById(this.id).innerHTML = ''
        let qrcode = new QRCode(this.id, {
          text: this.url,
          width: this.width,
          height: this.width
        })
      })
    }
  },
  mounted() {
    this.qrcode()
  }
}
</script>
<style scoped lang="scss">
.qrcode {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>